<template>
  <div class="staff">
    <div class="page_content">
      <div class="content_title"><span>员工管理</span></div>

      <el-row style="background: #fff;margin-bottom: 10px;">
        <el-col :span="22">
          <el-button type="primary" @click="showadd">新增</el-button>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="deleteUser">删除</el-button>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="resetpwd">重置密码</el-button>
          <!-- <el-button @click="" type="" style="border-color: #409EFF;color: #409EFF;">停用</el-button>
					<el-button @click="" type="" style="border-color: #409EFF;color: #409EFF;">启用</el-button> -->
        </el-col>
        <el-col :span="2">
          <div class="total_bar">
            <span>共{{ count }}条</span>
          </div>
        </el-col>

      </el-row>

      <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          prop="realname"
          label="用户名"
        />
        <el-table-column
          prop="cellphone"
          label="联系方式"
        />
        <el-table-column
          prop="status"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            {{
              scope.row.status==1?'正常':
              scope.row.status==2?'停用':'其他'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="permission"
          label="权限"
          show-overflow-tooltip
        />
        <el-table-column
          prop="permission2"
          label="权限内容"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.permission2" :key="index">
              {{
                item == 3 ? '主图、':
                item == 4 ? '资讯、':
                item == 5 ? '商品、':
                item == 6 ? '系列、':
                item == 7 ? '订单、':
                item == 8 ? '售后、':
                item == 9 ? '用户、':
                item == 10 ? '后台':'其他'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="addtime"
          label="创建时间"
          show-overflow-tooltip
        />
        <el-table-column
          prop="logintime"
          label="上次登录时间"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showedit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;justify-content: center;padding: 20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="20"
          :page-count="total"
          :total="count"
          @current-change="getData"
        />
      </div>

      <el-dialog title="新增员工" :visible.sync="dialogVisible">
        <div>
          <div class="dialog_item">
            <div class="dialog_ad_item"><span>用户名</span></div>
            <el-input v-model="realname" placeholder="请输入用户名" />
          </div>
          <div class="dialog_item">
            <div class="dialog_ad_item"><span>手机号</span></div>
            <el-input v-model="cellphone" placeholder="请输入手机号" />
          </div>
          <div class="dialog_item">
            <div class="dialog_ad_item"><span>密码</span></div>
            <el-input v-model="password" placeholder="请输入密码" />
          </div>
          <div style="margin-top: 10px;border: 1px solid #F1F1F1;padding: 10px;">
            <div style="margin-bottom: 10px;">权限</div>
            <el-checkbox-group v-model="permission2">
              <el-checkbox label="3">主图模块</el-checkbox>
              <el-checkbox label="4">资讯模块</el-checkbox>
              <el-checkbox label="5">商品模块</el-checkbox>
              <el-checkbox label="6">系列模块</el-checkbox>
              <el-checkbox label="7">订单模块</el-checkbox>
              <el-checkbox label="8">售后模块</el-checkbox>
              <el-checkbox label="9">用户模块</el-checkbox>
              <el-checkbox label="10">后台模块</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑员工" :visible.sync="dialogeditVisible">
        <div>
          <div class="dialog_item">
            <div class="dialog_ad_item"><span>用户名</span></div>
            <el-input v-model="realname" placeholder="请输入用户名" />
          </div>
          <div class="dialog_item">
            <div class="dialog_ad_item"><span>手机号</span></div>
            <el-input v-model="cellphone" placeholder="请输入手机号" />
          </div>
          <div class="dialog_item">
            <div class="dialog_ad_item"><span>密码</span></div>
            <el-input v-model="password" placeholder="请输入密码" />
          </div>
          <div style="margin-top: 10px;border: 1px solid #F1F1F1;padding: 10px;">
            <div style="margin-bottom: 10px;">权限</div>
            <el-checkbox-group v-model="permission2">
              <el-checkbox label="3">主图模块</el-checkbox>
              <el-checkbox label="4">资讯模块</el-checkbox>
              <el-checkbox label="5">商品模块</el-checkbox>
              <el-checkbox label="6">系列模块</el-checkbox>
              <el-checkbox label="7">订单模块</el-checkbox>
              <el-checkbox label="8">售后模块</el-checkbox>
              <el-checkbox label="9">用户模块</el-checkbox>
              <el-checkbox label="10">后台模块</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogeditVisible = false">取 消</el-button>
          <el-button type="primary" @click="memberEdit">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { memberList, memberAdd, delMember, repasswordMember, memberEdit } from '@/api/shop'
export default {
  data() {
    return {
      dialogVisible: false,
      dialogeditVisible: false,
      multipleSelection: [],
      tableData: [],
      count: 1,
      total: 1,

      realname: '',
      cellphone: '',
      password: '',
      permission2: [],

      edituserid: ''
    }
  },
  created() {
    this.getData(1)
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getData(e) {
      memberList({ page: e }).then(res => {
        if (res.code == 1001) {
          this.count = Number(res.list.count)
          this.total = Number(res.list.total)
          this.tableData = res.list.list
        }
      })
    },
    showadd() {
      this.realname = '',
      this.cellphone = '',
      this.password = '',
      this.permission2 = []
      this.dialogVisible = true
    },
    addUser() {
      memberAdd({
        frames: 1,
        realname: this.realname,
        cellphone: this.cellphone,
        password: this.password,
        permission2: this.permission2.toString()
      }).then(res => {
        if (res.detail.status == 1) {
          this.getData(1)
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }
      })
    },
    deleteUser() {
      const self = this
      this.$confirm('此操作将删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const userid = []
        self.multipleSelection.forEach(row => {
          userid.push(row.userid)
        })
        delMember({
          frames: 1,
          userid: userid.toString()
        }).then(res => {
          if (res.detail.status == 1) {
            this.$refs.multipleTable.clearSelection()
            userid.forEach(id => {
              // row.id==id ? row.status = status : row.status;
              self.tableData = self.tableData.filter(function(row) {
                return row.userid != id
              })
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    resetpwd() {
      const self = this
      this.$confirm('此操作将重置密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const userid = []
        self.multipleSelection.forEach(row => {
          userid.push(row.userid)
        })
        repasswordMember({
          frames: 1,
          userid: userid.toString()
        }).then(res => {
          if (res.detail.status == 1) {
            this.$refs.multipleTable.clearSelection()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    showedit(data) {
      this.realname = data.realname,
      this.cellphone = data.cellphone,
      this.password = data.password,
      this.permission2 = data.permission2
      this.edituserid = data.userid
      this.dialogeditVisible = true
    },
    memberEdit() {
      memberEdit({
        frames: 1,
        userid: this.edituserid,
        realname: this.realname,
        cellphone: this.cellphone,
        password: this.password,
        permission2: this.permission2.toString()
      }).then(res => {
        if (res.detail.status == 1) {
          this.getData(1)
          this.dialogeditVisible = false
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.staff{
	padding: 20px;
	min-height: 100%;
	.page_content{
		padding: 20px;
		background:#fff;
		.el-row{
			.el-button{
				min-width: 120px;
			}
		}
		.content_title{
			font-size: 16px;
			font-weight: 600;
			padding-bottom: 20px;
		}
		.total_bar{
			height: 40px;
			line-height: 40px;
		}

		.dialog_item{
			margin-bottom: 10px;
			.dialog_ad_item{
				margin-bottom: 10px;
			}
		}

	}

}
</style>
